<template>
  <div class="main">
    <p>{{ title }}</p>
    <slot name="default"></slot>
    <slot name="content"></slot>
    <slot name="scope" :games="games" :car="car"></slot>
    <br />
    <hr />
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
defineProps(["title"]);
let car = ref('奔驰')
let games = reactive([
  { id: 1, name: "穿越火线" },
  { id: 2, name: "QQ飞车" },
  { id: 3, name: "地下城勇士" },
]);
</script>
<style lang="scss" scoped>
.main {
  width: 300px;
  // background-color: aqua;
  box-shadow: 0 0 10px;
}
</style>
